<template>
  <div>
    <van-nav-bar
      :title="`${mu} - ${ke}`"
      @click-left="routerBack()"
      left-arrow
      :fixed="true"
      :safe-area-inset-top="true"
      :placeholder="true"
    >
    </van-nav-bar>
    <van-grid direction="horizontal" :column-num="3">
      <van-grid-item
        v-for="item in birds"
        :key="item._id"
        :text="item.BirdChineseName"
        @click="routerTo(`/bird/detail/${item._id}`)"
      />
    </van-grid>
  </div>
</template>
<script>
import { reactive, toRefs } from '@vue/reactivity';
import { onBeforeMount } from '@vue/runtime-core';
import { useRoute, useRouter } from 'vue-router';
import { getBirdsByClassify } from '@/api/interface';
export default {
  setup() {
    const router = useRouter();
    const route = useRoute();
    const state = reactive({
      mu: '',
      ke: '',
      birds: [],
    });
    const routerTo = (url) => {
      router.push({
        path: url,
      });
    };
    const routerBack = () => {
      router.go(-1);
    };
    onBeforeMount(async () => {
      state.mu = route.params.mu;
      state.ke = route.params.ke;
      await getBirdsByClassify({ mu: state.mu, ke: state.ke }).then((res) => {
        state.birds = res.data;
      });
    });
    return { ...toRefs(state), routerTo, routerBack };
  },
};
</script>
<style lang="less" scoped></style>
